<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JSDoc: Source: packages/geolayer/src/geolayer.vue</title>

    <script src="scripts/prettify/prettify.js"> </script>
    <script src="scripts/prettify/lang-css.js"> </script>
    <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
</head>

<body>

<div id="main">

    <h1 class="page-title">Source: packages/geolayer/src/geolayer.vue</h1>

    



    
    <section>
        <article>
            <pre class="prettyprint source linenums"><code>&lt;template>
  &lt;div>&lt;/div>  
&lt;/template>

&lt;script>
  /**
 *  XdhMapGeolayer 组件
 *  @module xdh-map-geo-layer
 *  @description 根据geoJson格式的数据生成 地图的图形覆盖物
 */
  import {mapReady, getParent} from 'utils/util'
  import GeoJSON from 'ol/format/GeoJSON';
  import VectorLayer from 'ol/layer/Vector';
  import VectorSource from 'ol/source/Vector';
  import CleanMixin from '../../../utils/mixins/clean'
  import {parseStyle} from '../../../packages'
  import {pointerMove} from 'ol/events/condition.js'
  import Select from 'ol/interaction/Select.js'
  const DefaultStyle = function () {
    return parseStyle({
      className: 'Style',
      fill: {
        className: 'Fill',
        color: 'rgba(0,0,0,0.5)'
      },
      stroke: {
        className: 'Stroke',
        color: 'black',
        width: 2
      }
    })
  }
// 从Echarts提取的编码解码方法
  const decodePolygon = function (coordinate, encodeOffsets) {
    let result = [];
    let prevX = encodeOffsets[0];
    let prevY = encodeOffsets[1];
    for (let i = 0; i &lt; coordinate.length; i += 2) {
      let x = coordinate.charCodeAt(i) - 64;
      let y = coordinate.charCodeAt(i + 1) - 64;
      // ZigZag decoding
      x = (x >> 1) ^ (-(x &amp; 1));
      y = (y >> 1) ^ (-(y &amp; 1));
      // Delta deocding
      x += prevX;
      y += prevY;
      
      prevX = x;
      prevY = y;
      // Dequantize
      result.push([x / 1024, y / 1024]);
    }
    
    return result;
  }
  export default {
    name: 'XdhMapGeoLayer',
    mixins: [CleanMixin],
    components: {
    },
    /**
     * 参数属性
     * @member props
     * @property {object} state geoJson格式的文件
     * @property {function} drawDefine 定义单个Feature生成时执行的定义函数
     * @property {boolean | object} withLayer 是否使用layer图层， 或定义layer图层属性的数据， 为false / undefined / null 时表示不实用图层，默认false
     */
    props: {
      state: {
        type: Object,
        required: true
      },
      drawDefine: {
        type: Function
      },
      withLayer: {
        type: [Boolean, Object],
        default: false
      }
    },
    data() {
      return {
        parent: null,
        map: null,
        features: [],
        
        style: DefaultStyle(),
        vectorContext: null,
        vectorLayer: null
      }
    },
    computed: {
      decodeGeo() {
        if (!this.state) return null
        const geo = this.state
        const features = geo.features
        features.forEach(feature => {
          let geometry = feature.geometry
          let coordinates = geometry.coordinates
          let encodeOffsets = geometry.encodeOffsets
          if (!encodeOffsets) return geo
          geometry.coordinates = coordinates.map((coordinate, index) => {
            if (Array.isArray(coordinate)) {
              return coordinate.map((coord, j) => {
                return decodePolygon(coord, encodeOffsets[index][j])
              })
            }
            return decodePolygon(coordinate, encodeOffsets[index])
          })
        })
        return geo
      }
    },
    watch: {
      
    },
    methods: {
      ready(map) {
        this.map = map
        if (this.vectorLayer &amp;&amp; this.withLayer) {
          this.map.addLayer(this.vectorLayer)
        } else if(this.features.length) {
          this.features.forEach((feature) => {
            this.parent.addFeature(feature) 
          })
        }
        this.bindEventAtFeatures()
        this.$nextTick(() => {
          /**
           * geoJson 图形渲染完成触发
           * @event ready
           * @param {Array} features
           */
          this.$emit('ready', this.features)
        })
      },
      bindEventAtFeatures() {
        this.features.forEach((feature) => {
          let obj = Object.assign({}, this.$listeners)
          for (let key in obj) {
            if (key === 'mouseLeave' || key === 'mouseEnter' || key === 'pointermove') {
              return
            } else {
              this.parent._bind(key, feature, obj[key], this._uid)
            }
          }
        })
        
        this.select = new Select({condition: pointerMove})
        this.map.addInteraction(this.select)
        this.select.on('select', (e) => {
          if (e.selected.length) {
            this.$nextTick(() => {
              /**
               * 鼠标进入某个feature时触发
               * @event mouseEnter
               * @param {Object} event
               * @param {ol/Feature} feature
               */
              this.$emit('mouseEnter', e, e.selected[0])
            })
          }
          if (e.deselected.length) {
            /**
               * 鼠标离开某个feature时触发
               * @event mouseEnter
               * @param {Object} event
               * @param {ol/Feature} feature
               */
            this.$emit('mouseLeave', e, e.deselected[0])
          }
        })
      },
      setFeatures() {
        this.features = (new GeoJSON()).readFeatures(this.decodeGeo)
        this.features.forEach((feature, index) => {
          feature.setStyle(this.style)
          if (this.drawDefine) {
            setTimeout(() => {
              this.drawDefine(feature)
            }, index)
          }
        })
      },
      /**
       * 获取geolayer组件生成的所有feature
       * @method getFeatures
       */
      getFeatures() {
        return this.features
      },
      /**
       * 输出从Echarts提取的编码解码方法
       * @method _decodePolygon
       */
      _decodePolygon(coordinate, encodeOffsets) {
        return decodePolygon(coordinate, encodeOffsets)
      }
    },
    created() {
      this.parent = getParent.call(this)
     
      this.setFeatures()
      this.source = new VectorSource({
        features: this.features,
        format: new GeoJSON()
      })

      this.vectorLayer = new VectorLayer({
        source: this.source
      })

      if (this.withLayer &amp;&amp; typeof this.withLayer === 'object') { 
        this.vectorLayer.setProperties(this.withLayer)
        
      }
    },
    mounted() {
      mapReady.call(this, this.ready)
    },
    beforeDestroy() {
      if (this.withLayer) {
        this.map.removeLayer(this.vectorLayer)
        this.features = []
        this.vectorLayer = null
      } else {
        this.features.forEach((feature) => {
          this.parent.removeFeature(feature)
        })
        this.features = []
        this.vectorLayer = null
      }
    }
  }
&lt;/script>
</code></pre>
        </article>
    </section>




</div>

<nav>
    <h2><a href="index.html">Home</a></h2><h3>Modules</h3><ul><li><a href="module-xdh-map.html">xdh-map</a></li><li><a href="module-xdh-map-circle.html">xdh-map-circle</a></li><li><a href="module-xdh-map-dialog.html">xdh-map-dialog</a></li><li><a href="module-xdh-map-draw.html">xdh-map-draw</a></li><li><a href="module-xdh-map-draw-arc.html">xdh-map-draw-arc</a></li><li><a href="module-xdh-map-draw-panel.html">xdh-map-draw-panel</a></li><li><a href="module-xdh-map-drawdown.html">xdh-map-drawdown</a></li><li><a href="module-xdh-map-echarts.html">xdh-map-echarts</a></li><li><a href="module-xdh-map-geo-layer.html">xdh-map-geo-layer</a></li><li><a href="module-xdh-map-group.html">xdh-map-group</a></li><li><a href="module-xdh-map-heat.html">xdh-map-heat</a></li><li><a href="module-xdh-map-html.html">xdh-map-html</a></li><li><a href="module-xdh-map-icon.html">xdh-map-icon</a></li><li><a href="module-xdh-map-image.html">xdh-map-image</a></li><li><a href="module-xdh-map-line.html">xdh-map-line</a></li><li><a href="module-xdh-map-mask.html">xdh-map-mask</a></li><li><a href="module-xdh-map-measure.html">xdh-map-measure</a></li><li><a href="module-xdh-map-overview.html">xdh-map-overview</a></li><li><a href="module-xdh-map-panel.html">xdh-map-panel</a></li><li><a href="module-xdh-map-placement.html">xdh-map-placement</a></li><li><a href="module-xdh-map-pointer.html">xdh-map-pointer</a></li><li><a href="module-xdh-map-polygon.html">xdh-map-polygon</a></li><li><a href="module-xdh-map-popup.html">xdh-map-popup</a></li><li><a href="module-xdh-map-rectangle.html">xdh-map-rectangle</a></li><li><a href="module-xdh-map-scatter.html">xdh-map-scatter</a></li><li><a href="module-xdh-map-text.html">xdh-map-text</a></li><li><a href="module-xdh-map-track.html">xdh-map-track</a></li><li><a href="module-xdh-map-type.html">xdh-map-type</a></li><li><a href="module-xdh-map-warp.html">xdh-map-warp</a></li><li><a href="module-xdh-map-zoom.html">xdh-map-zoom</a></li><li><a href="module-xdh-map-zoom-panel.html">xdh-map-zoom-panel</a></li></ul><h3>Classes</h3><ul><li><a href="ol.interaction.areaSelect.html">areaSelect</a></li><li><a href="ol.interaction.drag.html">drag</a></li><li><a href="ol.source.TileSuperMapRest.html">TileSuperMapRest</a></li></ul><h3>Events</h3><ul><li><a href="module-xdh-map-type.html#~event:change">change</a></li><li><a href="module-xdh-map.html#~event:changeType">changeType</a></li><li><a href="module-xdh-map-pointer.html#~event:copy">copy</a></li><li><a href="module-xdh-map-draw.html#~event:drawend">drawend</a></li><li><a href="module-xdh-map-draw.html#~event:drawstart">drawstart</a></li><li><a href="module-xdh-map-draw.html#~event:modifyend">modifyend</a></li><li><a href="module-xdh-map-draw.html#~event:modifystart">modifystart</a></li><li><a href="module-xdh-map-geo-layer.html#~event:mouseEnter">mouseEnter</a></li><li><a href="module-xdh-map-track.html#~event:move">move</a></li><li><a href="global.html#event:on-boxEnd">on-boxEnd</a></li><li><a href="global.html#event:on-boxStart">on-boxStart</a></li><li><a href="global.html#event:on-dragDown">on-dragDown</a></li><li><a href="global.html#event:on-dragMove">on-dragMove</a></li><li><a href="global.html#event:on-dragUp">on-dragUp</a></li><li><a href="module-xdh-map-draw-panel.html#~event:on-draw">on-draw</a></li><li><a href="module-xdh-map-draw-panel.html#~event:on-draw-end">on-draw-end</a></li><li><a href="module-xdh-map-draw-panel.html#~event:on-edit-start">on-edit-start</a></li><li><a href="module-xdh-map-draw-panel.html#~event:on-finish-draw">on-finish-draw</a></li><li><a href="module-xdh-map-draw-panel.html#~event:on-finish-edit">on-finish-edit</a></li><li><a href="module-xdh-map-draw-panel.html#~event:on-inited">on-inited</a></li><li><a href="module-xdh-map-measure.html#~event:on-measureEnd">on-measureEnd</a></li><li><a href="module-xdh-map-drawdown.html#~event:on-toggle">on-toggle</a></li><li><a href="module-xdh-map.html#~event:ready">ready</a></li><li><a href="module-xdh-map-track.html#~event:start">start</a></li><li><a href="module-xdh-map-track.html#~event:stop">stop</a></li></ul><h3>Global</h3><ul><li><a href="global.html#bd09ToGcj02">bd09ToGcj02</a></li><li><a href="global.html#bd09ToGps84">bd09ToGps84</a></li><li><a href="global.html#bd09ToWgs84">bd09ToWgs84</a></li><li><a href="global.html#capitalize">capitalize</a></li><li><a href="global.html#convertToWgs84">convertToWgs84</a></li><li><a href="global.html#createLayer">createLayer</a></li><li><a href="global.html#createTdtLayer">createTdtLayer</a></li><li><a href="global.html#D2R">D2R</a></li><li><a href="global.html#featureStyleRender">featureStyleRender</a></li><li><a href="global.html#gcj02ToBd09">gcj02ToBd09</a></li><li><a href="global.html#gcj02ToWgs84">gcj02ToWgs84</a></li><li><a href="global.html#gcjToGps84">gcjToGps84</a></li><li><a href="global.html#get">get</a></li><li><a href="global.html#getDistance">getDistance</a></li><li><a href="global.html#getParent">getParent</a></li><li><a href="global.html#gps84ToGcj02">gps84ToGcj02</a></li><li><a href="global.html#keyMap">keyMap</a></li><li><a href="global.html#LAYERS">LAYERS</a></li><li><a href="global.html#mapReady">mapReady</a></li><li><a href="global.html#mix">mix</a></li><li><a href="global.html#mixProps">mixProps</a></li><li><a href="global.html#options">options</a></li><li><a href="global.html#outOfChina">outOfChina</a></li><li><a href="global.html#pi">pi</a></li><li><a href="global.html#prefix">prefix</a></li><li><a href="global.html#props">props</a></li><li><a href="global.html#set">set</a></li><li><a href="global.html#StyleMap">StyleMap</a></li><li><a href="global.html#wgs84ToBd09">wgs84ToBd09</a></li><li><a href="global.html#wgs84ToGcj02">wgs84ToGcj02</a></li></ul>
</nav>

<br class="clear">

<footer>
    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Sat Mar 21 2020 16:40:44 GMT+0800 (GMT+08:00)
</footer>

<script> prettyPrint(); </script>
<script src="scripts/linenumber.js"> </script>
</body>
</html>
